<template>
  <div id="app">
    <h1>课程表组件测试</h1>
    <div class="test-container">
      <FireworksSchedule 
      :subjects="subjects"
      :times="times"
      :dayslist="dayslist"
      :watermarkText="watermarkText"
      :mainTitle="mainTitle"
      :SubjectTitle="SubjectTitle"
      :primaryColor="primaryColor"
      :subjectListWidth="subjectListWidth"
      :scheduleContainerWidth="scheduleContainerWidth"
      :cellWidth="cellWidth"
      :cellHeight="cellHeight"
      @course-added="onCourseAdded"
      @course-removed="onCourseRemoved"
      @export-complete="onExportComplete"
      @clear-complete="onClearComplete"
      @move-success="onMoveSuccess"
      @confirm-remove="onConfirmRemove"
      @cancel-remove="onCancelRemove"
      @onDragStart="onDragStart"
      @onCellDragStart="onCellDragStart" />
    </div>
  </div>
</template>

<script>
// vue2版本
import FireworksSchedule from 'fireworks-schedule/vue2';
import 'fireworks-schedule/vue2/style.css';

// vue3版本
// import FireworksSchedule from 'fireworks-schedule/vue3';
// import 'fireworks-schedule/vue3/style.css';

export default {
  name: 'App',
  components: {
    FireworksSchedule
  },
  data() {
    return {
      subjects: ['数学', '英语', '语文','vue2ces'],
      times: ['第一节', '第二节', '第三节', '第四节', '第五节', '第六节'],
      dayslist: ['周一', '周二', '周三', '周四', '周五'],
      watermarkText: 'Fireworks的课程表组件',
      mainTitle: '课程表',
      SubjectTitle: '课程列表',
      subjectListWidth: '220px',
      scheduleContainerWidth: 'auto',
      cellWidth: 'auto',
      cellHeight: '90px'
    };
  },
  methods: {
    onCourseAdded(payload) {
      console.log('课程添加成功', payload);
    },
    onCourseRemoved(payload) {
      console.log('课程移除成功', payload);
    },
    onExportComplete(image) {
      console.log('课程表导出完成', image);
    },
    onClearComplete() {
      console.log('课程表已清空');
    },
    onMoveSuccess() {
      console.log('课程移动成功');
    },
    onConfirmRemove(payload) {
      console.log('确认移除课程', payload);
    },
    onCancelRemove() {
      console.log('取消移除课程');
    },
    onDragStart(event, subject) {
      console.log('开始拖拽课程', subject);
    },
    onCellDragStart(event, row, col) {
      console.log('开始拖拽单元格', row, col);
    }
  }
}
</script>

<style>
#app {
  font-family: 'Microsoft YaHei', Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 20px;
}

h1 {
  margin-bottom: 30px;
}

.test-container {
  max-width: 1200px;
  margin: 0 auto;
}
</style>